
<template>
  <div class="productsAndservices">
    <div class="banner">
      <h1>数字化营销服务</h1>
      <div class="spans">
        <span v-for="item in spans" :key="item">{{ item }}</span>
      </div>
      <div class="tabs-box">
        <div class="tabs">
          <b>|</b>
          <span :class="index == 1 ? 'activeSpan' : ''" @click="toOtherPage('/Spread')">公关传播</span>
          <b>|</b>
          <span :class="index == 2 ? 'activeSpan' : ''" @click="toOtherPage('/Marketing')">数字化营销</span>
          <b>|</b>
          <span :class="index == 3 ? 'activeSpan' : ''" @click="toOtherPage('/Design')">创意设计</span>
          <b>|</b>
          <span :class="index == 4 ? 'activeSpan' : ''" @click="toOtherPage('/Offline')">线下公关</span>
          <b>|</b>
          <span :class="index == 5 ? 'activeSpan' : ''" @click="toOtherPage('/Monitor')">营销工具</span>
          <b>|</b>
        </div>
      </div>
    </div>
    <div class="servers">
      <h1>数字化营销业务</h1>
      <p>结合目标受众群体特征，通过主流媒体：新闻、微博、抖音、论坛、微信等，进行深度数字化信息统计分析，</p>
      <p>
        筛选聚合度高的KOL进行传播从而实现有效信息转化。
        利用多媒体头部平台，采用SEM、信息流原生创意形式投放广告
      </p>
      <Columns :column="column"></Columns>
    </div>
    <div class="case-box" v-if="column.length">
      <img class="bg-img" :src="img" alt />
      <h1>服务案例</h1>
      <p>致力于协助企业品牌形象的建立和公众活动的开展</p>
      <Case :caseList="caseList"></Case>
    </div>
    <MyForm></MyForm>
  </div>
</template>

<script>
// @ is an alias to /src
import MyForm from "../../components/myForm";
import Columns from "../../components/serves";
import Case from "../../components/case";
// var img = require("../../../public/static/pAnds/i1.png");
export default {
  name: "ProductsAndservices",
  components: { MyForm, Columns, Case },
  data() {
    return {
      index: 2,
      spans: [
        "媒介策略及执行",
        "百度广告投放",
        "今日头条投放",
        "腾讯朋友圈投放"
      ],
      column: [],
      caseList: [],
      imgIndex: 0,
      img: ""
    };
  },
  methods: {
    //跳转页面
    toOtherPage(path) {
      this.$router.push(path);
    }, //获取业务列表
    getServeList() {
      this.$post("/v1/product/business/list", { type: 2 }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.column = data.businesses;
        }
      });
    },
    getCaseList() {
      this.$post("/v1/product/demo/list", {
        type: 2,
        page: 1,
        pageSize: 9999
      }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.caseList = data.demos;
          this.img = this.caseList[0].cover;
        }
      });
    },
    getIndex(imgIndex) {
      this.imgIndex = imgIndex;
      this.img = this.caseList[imgIndex].cover;
    }
  },
  mounted() {
    this.$parent.setNav(2, 2);
    this.getServeList();
    this.getCaseList();
  }
};
</script>
<style lang="less" scoped>
.productsAndservices {
  text-align: center;
  .banner {
    height: 7.64rem;
    background-image: url("../../../public/static/pAnds/fuwu2-banner@2x.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 1.8rem;
    box-sizing: border-box;
    position: relative;
    h1 {
      font-size: 0.6rem;
      color: #fff;
      text-align: center;
      margin-bottom: 0.62rem;
    }
    .spans {
      width: 9rem;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      span {
        padding: 0.16rem 0.25rem;
        border-radius: 0.52rem;
        background: rgba(26, 35, 121, 0.26);
        margin: 0.1rem;
        color: #fff;
        font-size: 0.18rem;
        border: 1px dashed #463f7d;
      }
    }
    .tabs-box {
      position: absolute;
      bottom: 0rem;
      left: 0;
      height: 0.8rem;
      line-height: 0.8rem;
      background: rgba(0, 0, 0, 0.8);
      width: 100%;
      .tabs {
        font-size: 0.22rem;
        cursor: pointer;
        > span {
          display: inline-block;
          width: 3rem;
          text-align: center;
          color: #fff;
        }
        .activeSpan {
          background: #1a72e6;
        }
        b {
          color: #64656c;
        }
      }
    }
  }
  .servers {
    background: #eff7fe;
    padding: 0.8rem 0 1.14rem;
    h1 {
      font-size: 0.36rem;
      color: #000000;
      margin-bottom: 0.18rem;
    }
    p {
      font-size: 0.18rem;
      margin-bottom: 0.2rem;
    }
    .columns {
      width: 15.2rem;
      margin: 1.1rem auto 0;
      display: flex;
      .e-column {
        width: 3.6rem;
        height: 5.35rem;
        box-sizing: border-box;
        padding: 0.48rem 0.5rem 0;
        background: #fff;
        margin-right: 0.25rem;
        color: #000;
        box-shadow: 1px 1px 5px 0px rgba(29, 39, 165, 0.33);
        .icon {
          width: 1.65rem;
          height: 1.26rem;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          font-size: 0.3rem;
          margin: 0.43rem 0;
        }
        .dian {
          width: 0.35rem;
          height: 0.06rem;
          background: #1a72e6;
          margin: 0 auto;
          border-radius: 0.03rem;
        }
        .describe {
          font-size: 0.18rem;
          margin-top: 0.4rem;
          line-height: 0.36rem;
          text-align: left;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .case-box {
    height: 9rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 0.56rem;
    .bg-img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: -1;
      filter: blur(30px);
    }
    h1 {
      font-size: 0.36rem;
      font-weight: 600;
      color: #fff;
      text-align: center;
      margin-bottom: 0.18rem;
    }
    p {
      color: #fff;
      font-size: 0.18rem;
      margin-bottom: 0.74rem;
    }
  }
}
/deep/.swiper-pagination-bullet {
  width: 24px;
  height: 4px;
  border-radius: 4px;
}
@media screen and (max-width: 1000px) {
  .productsAndservices {
    .banner {
      height: 6.83rem;
      padding-top: 1.6rem;
      h1 {
        margin-bottom: 0.4rem;
      }
      .spans {
        width: 100%;
        span {
          font-size: 12px;
        }
      }
      .tabs-box {
        width: 100%;
        .tabs {
          display: flex;
          > span {
            width: 20%;
            text-align: center;
            color: #fff;
          }
        }
      }
    }
    .servers {
      padding-bottom: 0;
      > p {
        width: 6rem;
        line-height: 0.4rem;
        margin: 0 auto 0.2rem;
      }
      .columns {
        width: 100%;
        flex-wrap: wrap;
        padding: 0 0.35rem;
        box-sizing: border-box;
        margin: 1.1rem auto;
        justify-content: space-between;
        .e-column {
          width: 48%;
          margin-bottom: 0.24rem;
          margin-right: 0;
        }
      }
    }
    .case-box {
      height: auto;
      padding-bottom: 1rem;
    }
  }
}
</style>